<template>
    <div>
        <h2>子组件</h2>
        <h2>{{ info }}</h2>
        <h2>{{ obj }}</h2>
        <h2>{{ msg.msg }}</h2>
        <h2>{{ msg1 }}</h2>
        <h3>vue2当中attrs的用法</h3>
        <h2>{{ $attrs.msg }}</h2>
        <button @click="pinchuan">拼串</button>
        <grand-son></grand-son>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import GrandSon from './GrandSon.vue';

export default defineComponent({
    components: { GrandSon },
    props: {
        info: {
            type: String,
            required: true,
            default: 'xxx',
        },
        obj: {
            type: Object,
            required: false,
            default: () => {
                return {};
            },
        },
    },
    emits: ['fun', 'foo'],
    setup(props, context) {
        console.log(props);
        console.log(props.info);
        console.log(props.obj);
        console.log(context);
        console.log(context.attrs);
        console.log(context.attrs.msg);
        const msg = context.attrs;
        const msg1 = ref(context.attrs.msg);
        console.log(context.emit);
        context.emit('fun', '好尴尬啊');

        function pinchuan() {
            context.emit('fun', '不想说');
            context.emit('foo');
        }

        console.log(context.slots);

        return {
            msg,
            msg1,
            pinchuan,
        };
    },
    mounted() {
        console.log(this.$attrs);

    },
});
</script>

<style scoped>

</style>